<template>
    <!-- ref 获取组件实例，设置属性、方法 -->
    <!-- module渲染cate数据  rules数据规则 -->
    <!-- 需注意prop和props的使用 -->
    <el-form ref="cateAdd" :model="cate" :rules="rules" label-width="120px">
      <el-form-item label="分类名字" prop="cateName">
        <el-input v-model="cate.cateName" />
      </el-form-item>
      <el-form-item label="父级分类" prop="pid">
      <!-- 级联选择器 el-cascader -->
        <el-cascader
          v-model="cate.pid"
          :options="pCates" :props="{
            checkStrictly: true,
            label: 'cateName',
            value: 'id',
            emitPath: false
          }" clearable />
      </el-form-item>

      <el-form-item label="是否在售" prop="onsale">
        <el-switch v-model="cate.onsale" inline-prompt active-text="在售" inactive-text="下架"/>
      </el-form-item>
      <!-- 上传icon -->
      <el-form-item label="分类图标">
        <el-upload
          ref="uploadRef"
          action="/api/upload"
          name="file"
          accept=".jpg,.png,.gif"
          :data="{a: 106,b: 8}"
          :on-success="uploadSuccess"
          :auto-upload="false"
          :before-upload="beforeUpload"
        >
          <el-button type="primary">选择上传图片</el-button>
        </el-upload>
          <img :src="cate.cateIcon" width="80" alt="">
      </el-form-item>
      <el-form-item>
          <el-button @click="doUpload" type="primary">确认上传</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="background: green">新增</el-button>
        <el-button @click="resetForm"  type="danger">重置</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
import { addCate } from '../../../api/cateLists'
export default {
  // 设置 级联选择器
  props: {
    cates: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      cate: {
        cateName: '',
        cateIcon: '',
        onsale: true,
        desc: '',
        pid: -1
      },
      pCates: [
        {
          id: -1,
          cateName: '顶层分类toppest'
        }
      ],
      rules: {
        cateName: [
          {
            required: true,
            message: '分类名字必填'
          },
          { // 可使用正则验证
            pattern: /[a-zA-Z]\w{3,7}/,
            message: '首字符必须是英文字母，4-8位 字母数字下划线'
          }
          // { // 可自定义验证规则 validator
          //   validator: (rule, value, callback) => {
          //     if (value !== '小明') {
          //       callback(new Error('必须输入小明'))
          //     } else {
          //       callback()
          //     }
          //   }
          // }
        ],
        pid: [
          {
            required: true,
            message: '父级分类必选'
          }
        ],
        onsale: [
          {
            required: true,
            message: '父级分类必选'
          }
        ],
        desc: [
          {
            required: true,
            message: '商品描述必填'
          }
        ]
      } // 设置 级联选择器
    }
  },
  watch: {
    // 设置 级联选择器
    cates: {
      handler (newVal) {
        this.pCates = [
          ...this.pCates,
          ...newVal
        ]
        console.log('this.pCates', this.pCates)
      },
      deep: true,
      immediate: true
    }
    // 设置 级联选择器
  },
  methods: {
    // 新增成功后 重置上一条数据
    resetForm () {
      this.$refs.cateAdd.resetFields()
    },
    beforeUpload (file) {
      // 上传前 钩子 return true 继续上传 false中止上传
      if (file.size > 1024 * 1024 * 10) {
        alert('文件不能超过10m')
        return false
      } else {
        return true
      }
    },
    // 上传图片
    doUpload () {
      this.$refs.uploadRef.submit()
    },
    // 图片上传成功回调 判断是否上传成功
    uploadSuccess (res) {
      if (res.code === 200) {
        this.cate.cateIcon = res.data.url
        console.log(res.data.url)
        this.$message({
          type: 'success',
          message: res.msg
        })
      }
    },
    // 点击提交事件 利用ref获取组件实例、dom
    // 判断表单是否 全部验证通过 通过 提交 否则不提交
    onSubmit () {
      this.$refs.cateAdd.validate().then(() => {
        addCate(this.cate).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 3000,
              onClose: () => {
                this.$router.go(0)
              }
            })
          }
        })
      })
        .catch(() => {
          alert('验证失败')
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
